<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="posts" v-cloak>
        <div class="top">
            <post-item0 :post="topPost"></post-item0>
        </div>
        <div class="others" v-if="otherPosts && otherPosts.length > 0">
            <post-item1 :post="post" v-for="(post, i) in otherPosts"></post-item1>
        </div>
    </div>
</template>

<script>
import PostItem0 from "./PostItem0";
import PostItem1 from "./PostItem1";

export default {
    components: { PostItem0, PostItem1 },
    data () {
        return {
            loading: false,
        };
    },
    props: {
        posts: { type: Array, default: [] },
    },

    mounted: function () { },

    computed: {
        topPost: function () {
            return this.posts[0];
        },
        otherPosts: function () {
            return this.posts.filter((p, i) => {
                return i >= 1;
            });
        },
    },

    methods: {},
};
</script>

<style scoped>
.posts {}

.others {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: hidden;
    flex-wrap: nowrap;
}

::-webkit-scrollbar {
    width: 0;
}

.others .post {
    margin-right: 20px;
    margin-bottom: 0;
}
</style>